<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:utils="http://java.sun.com/jsf/composite/utils"
      xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view locale="#{localizer.locale}" contentType="text/html"/>
<h:head>
    <link href="resources/styles/main.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/reset.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/style.css" rel="stylesheet" type="text/css"/>
	<link href="resources/styles/stimenu.css" rel="stylesheet" type="text/css"/>
    <h:outputScript library="primefaces" name="jquery/jquery.js"/>
    <title>#{m.title_cat_decoys}</title>
</h:head>

<h:body>

    <div>
        <utils:menuComponent/>

        <div class="product-container">
            <ul>
                <ui:repeat var="prod" value="#{showProducts.decoys}">

				<h:form>
					<p:commandLink action="#{bookmark.redir}">
						<li class="product">

								<!-- PRG pattern,make bookmarkable URL -->
								<h:inputHidden value="#{prod.id}"/>

								<!-- PRG pattern,make bookmarkable URL -->
								

									<f:setPropertyActionListener target="#{showProducts.product}" value="#{prod}"/>
									<span class="naming">#{prod.name}</span>
									<br/>

									<p:graphicImage value="#{prod.imgPath}" title="#{prod.name}"
													styleClass="image-product"/>

							   

								<div class="pricing">
									&nbsp;#{prod.price} #{m.uah}.<br/>
									<h:panelGroup class="presence-y" rendered="#{prod.present}">[#{m.in_stock}]</h:panelGroup>
									<h:panelGroup class="presence-n" rendered="#{!prod.present}">[#{m.out_stock}]</h:panelGroup>
								</div>
								
								<h:panelGroup styleClass="foamed-container" rendered="#{prod.foamed}" layout="block">
								<img src="#{request.contextPath}/resources/img/foam.gif" style="width:60px;height:60px;"/>
									<h:panelGroup styleClass="foamed-label" rendered="#{prod.foamed}" layout="block">#{m.foamed}</h:panelGroup>
								</h:panelGroup>
		
						</li>
					 </p:commandLink>
				</h:form>

                </ui:repeat>
            </ul>


        </div>


    </div>


</h:body>

</html>